/**
 * 页面ready方法
 */
$(document).ready(function() {
  formatTable();
});

/**
 * 判断表格是否是动态表格
 * 如果表格的表头第一个字段：
 * * 以 "dynamic;" 开头， 则表示为该表格为动态表格，需要进行转换。
 * * 否则，认为表格不是动态表格，不需要进行转换。
 *
 * @param {*} tabitem
 */
function isDynamicTable(tabitem) {
  th = $(tabitem).find("th").first();
  text = th.text().trim();
  tag = "dynamic;";
  dynamic = text.startsWith(tag);
  if (dynamic) {
    th.text(text.substr(tag.length));
  }
  return dynamic;
}

/**
 * 动态修改表格
 */
function formatTable() {
  $("table").each(function (tabindex, tabitem) {
    if (!isDynamicTable(tabitem)) {
      return;
    }
    setTableStyleAndCaption(tabindex, tabitem);
    removeEmptyHead(tabindex, tabitem);
    formatCell(tabindex, tabitem);
    deleteCell(tabindex, tabitem);
  });
}


/**
 * 通过在第一个 <th> 字段中使用自定义的格式，来设置表格 style 和 caption
 * 支持的格式为：
 *    style && caption && head
 * style : 指定表格的附加属性。为空表示表格没有附加属性。详见 handleStyles
 * caption : 指定表格的标题。为空表示表格无标题。支持输入 html 元素。
 * head : <th> 字段所要显示的内容。支持输入 html 元素。
 */
function setTableStyleAndCaption(tabindex, tabitem) {
  var tableFmt = RegExp(/.*&&.*&&.*/); // 自定义的表头格式
  thitem = $(tabitem).find("th").first();
  if ($(thitem).text().match(tableFmt)) {
    var arr = $(thitem).html().split("&amp;&amp;");
    var style = arr[0].trim();
    if (style.length != 0) {
      handleStyles(tabitem, style);
    }
    var cap = arr[1].trim();
    if (cap.length != 0) {
      var caption =$("<caption></caption>").html(cap);
      $(tabitem).prepend(caption);
    }
    $(thitem).html(arr[2]);
  }
}

/**
 * 如果表格的表头(head) 全部都是空，则删除表头
 */
function removeEmptyHead(tabindex, tabitem) {
  var count = 0;
  var total = 0;
  var last_th;
  $(tabitem).find("th").each(function (thindex, thitem) {
    total = total + 1;
    if ($.trim($(thitem).text()).length==0) {
      last_th = thitem;
      count = count + 1;
    }
  });
  if (count == total) {
    $(last_th).parent().remove();
  }
}

/**
 * 通过在 <th> 和 <td> 字段中使用自定义的格式，来设置支持动态设置表格单元
 * 支持的格式为：
 *    style && content
 * style : 指定单元格的附加属性。为空表示该单元格没有附加属性。详见 handleStyles
 * content : 指定单元格的内容。支持输入 html 元素。如： <font color="red">共3项</font>
 */
function formatCell(tabindex, tabitem) {
  var tdFmt = RegExp(/.*&&.*/);   // 自定义的单元格格式
  $(tabitem).find("th, td").each(function (tdindex, tditem) {
    if ($(tditem).text().match(tdFmt)) {
      // console.log($(tditem).html());
      var arr = $(tditem).html().split("&amp;&amp;");
      // var arr = $(tditem).text().split("&&");
      var style = arr[0].trim();
      if (style.length != 0) {
        handleStyles(tditem, style);
      }
      $(tditem).html(arr[1]);
    }
  });
}

/**
 * 支持以英文分号(;)分隔的多个项：
 *     <item>-1; <item>-2; ...
 *
 * 每一项可以是：
 *     1. CSS class 的名字；
 *     2. "attr=value" 形式的属性。
 *
 * 如： style 的取值为 “transparent;colspan=2”
 *    表示需要为该项增加一个名为 transparent 的样式，再添加属性：colspan=2
 */
function handleStyles(item, style) {
  var splited = style.split(";");
  for (var key in splited) {
    var type = splited[key].trim();
    if (type.length == 0) {
      continue;
    }
    if (type.search("=") == -1) {
      $(item).addClass(type);
    } else {
      var attr = type.split("=");
      $(item).attr(attr[0], attr[1]);
    }
  }
}

/**
 * 删除具有 delete 属性的 <th> 和 <td> 字段
 */
function deleteCell(tabindex, tabitem) {
  $(tabitem).find("th.delete, td.delete").remove();
}
